<template>
  <div>
    <my-lazy v-if="isShow"></my-lazy>
    <div class="riman" v-else="!isShow">
      <ul>
        <li v-for="(item, i) in china">
          <div class="sign">
            <h1>{{ i + 1 < 10 ? "0" + (i + 1) : i + 1 }}</h1>
          </div>
          <div class="riman-img">
            <router-link to="/detail">
              <img
                :src="item.img + `@204w_272h.jpg`"
                @click="getCom(i)"
                alt=""
                srcset=""
              />
            </router-link>
          </div>
          <div class="riman-con">
            <h4>{{ item.title }}</h4>
            <ol>
              <li>{{ item.author }}</li>
              <li>{{ item.style }}</li>
              <li>更新至{{ item.lastTitle }}话</li>
            </ol>
          </div>
          <div class="riman-icon"></div>
        </li>
      </ul>
    </div>
  </div>
  <!-- <my-riman></my-riman> -->
</template>
<style lang="scss">
@import "../static/style/variable.scss";
.riman {
  width: 95%;
  height: 26.6667rem;
  margin: 0 auto;
  ul {
    li {
      display: flex;
      padding-top: 1.3333rem;
      .sign {
        position: relative;
        width: 2.0333rem;
        height: 8rem;
        h1 {
          position: absolute;
          top: -10px;
          left: 10px;
          // transform: rotate(5deg);
          font-size: 36px;
          color: #cf9870;
        }
      }
      .riman-img {
        width: 16.85rem;
        height: 8rem;
        a {
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
      .riman-con {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        h4 {
          font-weight: normal;
          padding-left: 0.4rem;
        }
        ol {
          li {
            padding-left: 0.4rem;
            color: $color;
            font-size: 11px;
            padding-top: 0.3rem;
          }
        }
      }
    }
  }
}
</style>

<script>
import { rank } from "@/request";
import lazyCom from "../components/lazyCom.vue";
export default {
  name: "guoman",
  data() {
    return {
      china: [],
      comId: 0,
      isShow: true,
    };
  },
  components: {
    "my-lazy": lazyCom,
  },
  methods: {
    getCom(i) {
      this.comId = this.china[i].id;
      localStorage.setItem("comid", this.comId);
    },
  },
  created() {
    this.isShow = true;
    rank({
      type: 4,
    }).then((content) => {
      // console.log(content);
      let { data } = content;
      // console.log(list);
      let guoman = data.map((item) => {
        let obj = {};
        if (item.styles[0] == undefined) {
          obj.style = "";
        } else {
          obj.style = item.styles[0].name;
        }
        obj.author = item.author[0];
        obj.title = item.title;
        obj.img = item.vertical_cover;
        obj.id = item.comic_id;
        obj.lastTitle = item.last_short_title;
        return obj;
      });
      this.china = guoman;
      this.isShow = false;
    });
  },
};
</script>